axios的二次封装（简洁）

您所在的位置：网站首页 › vue axios解决跨域 › axios的二次封装（简洁）

axios的二次封装（简洁）

2023-04-09 15:24| 来源: 网络整理| 查看: 265

axios的二次封装

文章目录前言一、基本页面的创建二、使用步骤1.引入相关的包2.编写文件3.编写请求4.解决跨域5.测试使用总结

前言

为什么需要二次封装

api 统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

一、基本页面的创建

首先需要准备一个vue的项目

先打开需要创建项目的文件夹下方输入cmd打开窗口在窗口输入vue create 项目的名称选择使用vue2.x版本等待创建，完成后进入文件夹内部在控制台输入npm run serve 二、使用步骤 1.引入相关的包

首先我们需要下载有关的包：

我们需要下载axios、element-ui(辅助)

npm i [email protected] npm i [email protected] 2.编写文件

在src下创建文件夹utils，在文件夹内部创建文件request.js

编写代码如下（示例）：

import axios from 'axios' import { Message } from 'element-ui' const service = axios.create({ baseURL: 'http://127.0.0.1:3030', timeout: 5000 , withCredentials: false // 表示跨域请求时是否需要使用凭证 }) // 请求拦截器 service.interceptors.request.use( config => { return config }, error => { // do something with request error console.log(error) return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { return response.data }, error => { console.log('err' + error) Message({ message: error.message, type: 'error', duration: 5 * 1000 }) return Promise.reject(error) } ) export default service

在api下新建index.js文件用于汇总各个部分的接口代码入下：

// 将模块统一暴露 import * as attr from './product/attr' //对外暴露 export default { attr }

在main.js入口文件就可以导入该文件，并且挂载到Vue的原型上方便调用，代码入下：

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 引入api请求接口 import API from '@/api' Vue.prototype.$API = API new Vue({ render: h => h(App), }).$mount('#app')

此时我们的简单封装就做好了

3.编写请求

在src下创建文件夹api，用于储存各个部分的接口，在api文件夹下再创建文件product用于收集product

部分的接口，在该文件夹下创建attr.js文件，用于书写请求，示例代码入下:

// product管理模块的数据 import request from '@/utils/request' // 获取分类列表 export function reqCateGoryList() { return request({ url: '/info', method: 'get' }) } 4.解决跨域

在前端的开发中，为了避免一些数据的发起和请求的地址发生跨域的问题，我们需要配置代理来解决

跨域

我们需要找到vue.config.js文件，编写解决跨域的代码，文件的代码如下

module.exports = { lintOnSave: false, //关闭eslint检查 devServer: { open: true, // 解决代理跨域问题 proxy: { '/dev-api': { target: 'http://127.0.0.1:3030', pathRewrite: { '^/dev-api': '' }, changeOrigin: true } } } } 5.测试使用

简单编写App.vue的代码用于测试

测试 export default { name: 'App', data() { return { list1: '' } }, methods: { async reqCateGory1List() { const res = await this.$API.attr.reqCateGoryList() if (res.code == 200) { this.list1 = res.data console.log(res.data) } } } } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; }

此时的控制台就可以输出数据了

总结

axios的二次封装展现了代码的模块化的思想，将各个区域的接口分工划分的十分明确

后面结合vuex可以得到跟好的管理

【本文地址】

axios的二次封装（简洁）

axios的二次封装（简洁）

今日新闻

推荐新闻